<template>
  <!-- 办理中心设置 -->
  <div class="processingset">
    <div class="content-main">
      <div class="editbox" :style="'display:'+(applySuccess?'none':'block')+';'">
        <span class="title-top">在线收缴费开通申请</span>
        <el-form label-width="1.6rem" class="ruleForm">
          <el-form-item label="开通在线支付类型" prop="type">
            <el-checkbox-group v-model="payType" @change="payTypeSelect">
              <el-checkbox label="在线微信支付" name="type"></el-checkbox>
              <el-checkbox label="在线支付宝支付" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <div class="box" v-if="wechatShow">
            <div class="row-top">
              <div class="box-title">
                <img class="ico" src="../../assets/img/processing_center/wechat.png" />
                <span class="txt">在线微信支付提交信息</span>
              </div>
              <span class="helptxt" @click="gotoWechat">如何获取填入信息指导</span>
            </div>
            <el-form-item label="微信APPID" :rules="[
      { required: true, message: ''}]">
              <el-input ref="wechatappId" v-model="wechatInfo.appId"></el-input>
            </el-form-item>
            <el-form-item label="微信支付商户ID" :rules="[
      { required: true, message: ''}]">
              <el-input ref="wechatmchId" v-model="wechatInfo.mchId"></el-input>
            </el-form-item>
            <el-form-item label="微信支付商户秘钥" :rules="[
      { required: true, message: ''}]">
              <el-input ref="wechatmchKey" v-model="wechatInfo.mchKey"></el-input>
            </el-form-item>

            <el-form-item label="商户证书" :rules="[
      { required: true, message: ''}]">
              <el-upload
                id="weChatUpload"
                class="upload-demo"
                :action="uploadUrl"
                :data="uploadData"
                :before-remove="beforeWeChatRemove"
                :on-remove="handleRemove"
                :file-list="weChatfileList"
                :on-success="handleAvatarSuccess"
                :headers="headers"
                :on-error="uploadError"
                :limit="1"
                accept=".p12"
                multiple
              >
                <el-button
                  size="small"
                  type="primary"
                  :disabled="weChatIsUpload"
                  @click="upLoadType =1"
                >点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传一个P12文件</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="子商户账号ID">
              <el-input v-model="wechatInfo.subAppId"></el-input>
            </el-form-item>
            <el-form-item label="子商户ID">
              <el-input v-model="wechatInfo.subMchId"></el-input>
            </el-form-item>
          </div>
          <div class="box" v-if="alipayShow">
            <div class="row-top">
              <div class="box-title">
                <img class="ico" src="../../assets/img/processing_center/alipay.png" />
                <span class="txt">在线支付宝支付提交信息</span>
              </div>
              <span class="helptxt">如何获取填入信息指导</span>
            </div>
            <el-form-item label="支付宝APPID" :rules="[
      { required: true, message: ''}]">
              <el-input ref="aliappId" v-model="aliInfo.appId"></el-input>
            </el-form-item>
            <el-form-item label="支付宝商户ID" :rules="[
      { required: true, message: ''}]">
              <el-input ref="alimchId" v-model="aliInfo.mchId"></el-input>
            </el-form-item>
            <el-form-item label="支付宝商户秘钥" :rules="[
      { required: true, message: ''}]">
              <el-input ref="alimchKey" v-model="aliInfo.mchKey"></el-input>
            </el-form-item>

            <el-form-item label="商户证书" :rules="[
      { required: true, message: ''}]">
              <el-upload
                id="aliUpload"
                class="upload-demo"
                :action="uploadUrl"
                :data="uploadData"
                :before-remove="beforeAliRemove"
                :on-remove="handleRemove"
                :file-list="alifileList"
                :on-success="handleAvatarSuccess"
                :headers="headers"
                :on-error="uploadError"
                :limit="1"
                accept=".p12"
              >
                <el-button
                  size="small"
                  type="primary"
                  :disabled="aliIsUpload"
                  @click="upLoadType =2"
                >点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传一个P12文件</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="子商户账号ID">
              <el-input v-model="aliInfo.subAppId"></el-input>
            </el-form-item>
            <el-form-item label="子商户ID">
              <el-input v-model="aliInfo.subMchId"></el-input>
            </el-form-item>
          </div>
          <el-form-item class="txtformrow" label="申请校区">
            <span>{{userInfo.school}}</span>
          </el-form-item>
          <el-form-item class="txtformrow" label="申请人">
            <span>{{userInfo.name}}</span>
          </el-form-item>
          <div class="btnbox">
            <el-button class="cancel" @click="resetForm()">重置</el-button>
            <el-button class="ok" @click="submitForm()">保存</el-button>
          </div>
        </el-form>
      </div>
      <div class="resultbox" :style="'display:'+(applySuccess?'block':'none')+';'">
        <span class="title-top">在线收缴费申请信息</span>
        <el-form ref="resultForm" label-width="1.6rem" class="ruleForm">
          <el-form-item label="开通在线支付类型">
            <el-checkbox-group v-model="payType" style="float:left;">
              <el-checkbox disabled label="在线微信支付" name="type"></el-checkbox>
              <el-checkbox disabled label="在线支付宝支付" name="type"></el-checkbox>
            </el-checkbox-group>
            <div style="float:right;margin-right:-2rem;" v-if="isOrg">
              <el-button type="primary" @click="editeApplyInfo">编 辑</el-button>
            </div>
          </el-form-item>
          <div class="box" v-if="wechatShow">
            <div class="row-top">
              <div class="box-title">
                <img class="ico" src="../../assets/img/processing_center/wechat.png" />
                <span class="txt">在线微信支付提交信息</span>
              </div>
              <span class="helptxt" @click="gotoWechat">如何获取填入信息指导</span>
            </div>
            <el-form-item label="微信APPID">
              <span>{{wechatInfo.appId}}</span>
            </el-form-item>
            <el-form-item label="微信支付商户ID">
              <span>{{wechatInfo.mchId}}</span>
            </el-form-item>
            <el-form-item label="微信支付商户秘钥">
              <span>{{wechatInfo.mchKey}}</span>
            </el-form-item>
            <el-form-item label="商户证书">
              <span>{{wechatInfo.keyPath.substr(wechatInfo.keyPath.lastIndexOf("/") + 1)}}</span>
            </el-form-item>
            <el-form-item
              label="子商户账号ID"
              v-if="wechatInfo.subAppId !=null && wechatInfo.subAppId !=''"
            >
              <span>{{wechatInfo.subAppId}}</span>
            </el-form-item>
            <el-form-item
              label="子商户ID"
              v-if="wechatInfo.subMchId !=null && wechatInfo.subMchId !=''"
            >
              <span>{{wechatInfo.subMchId}}</span>
            </el-form-item>
            <!-- <el-form-item class="txtformrow" label="微信支付账户" prop="wechatAccount">
              <span>{{resultInfo.wechatAccount}}</span>
            </el-form-item>
            <el-form-item label="微信支付秘钥" prop="wechatKey">
              <span>{{resultInfo.wechatKey}}</span>
            </el-form-item>-->
          </div>
          <div class="box" v-if="alipayShow">
            <div class="row-top">
              <div class="box-title">
                <img class="ico" src="../../assets/img/processing_center/alipay.png" />
                <span class="txt">在线支付宝支付提交信息</span>
              </div>
              <span class="helptxt">如何获取填入信息指导</span>
            </div>

            <el-form-item label="支付宝APPID">
              <span>{{aliInfo.appId}}</span>
            </el-form-item>
            <el-form-item label="支付宝商户ID">
              <span>{{aliInfo.mchId}}</span>
            </el-form-item>
            <el-form-item label="支付宝商户秘钥">
              <span>{{aliInfo.mchKey}}</span>
            </el-form-item>
            <el-form-item label="商户证书">
              <span>{{aliInfo.keyPath.substr(aliInfo.keyPath.lastIndexOf("/") + 1)}}</span>
            </el-form-item>
            <el-form-item label="子商户账号ID" v-if="aliInfo.subAppId !=null && aliInfo.subAppId !=''">
              <span>{{aliInfo.subAppId}}</span>
            </el-form-item>
            <el-form-item label="子商户ID" v-if="aliInfo.subMchId !=null && aliInfo.subMchId !=''">
              <span>{{aliInfo.subMchId}}</span>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
let vm;
let user;
export default {
  data() {
    return {
      /**是否已经申请成功 */
      applySuccess: false,
      currentPayType: [], //开始时保存原始状态
      uploadData: {
        content: "epayInfo"
      },
      upLoadType: 1, //上传文件类型
      uploadUrl: window.config.baseUrl + "file/upload",
      headers: {
        // 'Content-Type': 'multipart/form-data',
        token: tool.getItem(lsKey.token)
      },
      weChatfileList: [], //微信上传文件集合
      alifileList: [], //支付宝上传文件集合
      wechatShow: false, //是否显示微信设置
      isOrg:false,//是否为机构管理员
      wechatInfo: {
        appId: "", //APPID
        epayType: "2", //支付类型
        keyPath: "", //商户证书
        mchId: "", //商户ID
        mchKey: "", //商户密钥
        subAppId: "", //子商户账号ID
        subMchId: "" //子商户ID
      },
      aliInfo: {
        appId: "", //APPID
        epayType: "1", //支付类型
        keyPath: "", //商户证书
        mchId: "", //商户ID
        mchKey: "", //商户密钥
        subAppId: "", //子商户账号ID
        subMchId: "" //子商户ID
      },
      payType: [], //选择的设置类型
      userInfo: {
        name: "",
        campusList: [],
        selectCampus: "",
        school: ""
      },
      alipayShow: false,
      weChatIsUpload: false,
      aliIsUpload: false,
      applydialogVisible: false,
    };
  },
  watch: {},
  methods: {
    gotoWechat() {
      window.open(config.baseUrl + "res/wxpayHelp.html", "_blank");
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //上传文件失败
    uploadError: function(response, file) {
      console.log("上传文件失败response" + response);
    },
    //删除上传文件之前(阿里)
    beforeAliRemove(file, fileList) {
      vm.aliIsUpload = false;
    },
    //删除上传文件之前(微信)
    beforeWeChatRemove(file, fileList) {
      vm.weChatIsUpload = false;
    },
    //上传成功
    handleAvatarSuccess(res, file) {
      if (res.status != "success") {
        vm.weChatfileList = vm.upLoadType == 1 ? [] : vm.weChatfileList;
        vm.alifileList = vm.upLoadType == 2 ? [] : vm.alifileList;
        this.$message.error("上传文件失败，错误码" + res.errorCode);
      } else {
        //当上传文件类型为1时
        if (vm.upLoadType == 1) {
          vm.weChatIsUpload = true; //不可再上传文件
          vm.wechatInfo.keyPath = res.data.url; //设置证书的路径
        } else {
          vm.aliIsUpload = true; //不可再上传文件
          vm.aliInfo.keyPath = res.data.url; //设置证书的路径
        }
      }
      console.log(vm.weChatfileList);
    },
    init() {
      this.userInfo.name = user.nickName;
      this.userInfo.campusList = user.campusList;
      this.getSchoolNameById(this.$store.state.campusId);
      this.userInfo.school = this.userInfo.selectCampus.name;
      let paras = {
        sCampusId: this.$store.state.campusId
      };
      api.epayGet(paras).then(function(data) {
        if (data.resultCode == 2000) {
          vm.resetForm();
          if (data.info.epayInfoList.length == 0) {
            vm.isOrg = user.roleMode != 1;
            vm.applySuccess = user.roleMode == 1;
            vm.payType.push("在线微信支付");
            vm.wechatShow = true;
          } else {
            vm.isOrg = user.roleMode != 1;
             vm.applySuccess = true;
            vm.alifileList = [];
            vm.payType = [];
            vm.weChatfileList = [];
            data.info.epayInfoList.forEach(item => {
              if (item.epayType == "1") {
                vm.alipayShow = true;
                vm.payType.push("在线支付宝支付");
                vm.alifileList.push({
                  name: item.keyPath.substr(item.keyPath.lastIndexOf("/") + 1),
                  url: item.keyPath
                });
                vm.aliIsUpload = true;
                vm.aliInfo = item;
              } else {
                vm.wechatShow = true;
                vm.payType.push("在线微信支付");
                vm.weChatfileList.push({
                  name: item.keyPath.substr(item.keyPath.lastIndexOf("/") + 1),
                  url: item.keyPath
                });
                vm.weChatIsUpload = true;
                vm.wechatInfo = item;
              }
            });
            vm.currentPayType = vm.payType; //保存原始状态
          }
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    campusChange: function(campusId) {
      //校区改变
      this.init();
    },
    /**通过校区id获取校区名称 */
    getSchoolNameById(id) {
      let arr = this.userInfo.campusList;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].campusId == id) {
          this.userInfo.selectCampus = arr[i];
          break;
        }
      }
    },
    /**支付类型选择 */
    payTypeSelect(d) {
      this.wechatShow = false;
      this.alipayShow = false;
      if (d.length === 0) return;
      d.forEach(d => {
        if (d == "在线微信支付") {
          this.wechatShow = true;
        }
        if (d == "在线支付宝支付") {
          this.alipayShow = true;
        }
      });
    },
    /**提交按钮 */
    submitForm() {
      let epayInfoList = [];
      //选择了微信支付设置
      if (this.wechatShow) {
        //校验
        if (!vm.checkRuleForWeChat()) return;
        epayInfoList.push(vm.wechatInfo);
      }
      //选择了支付宝支付设置
      if (this.alipayShow) {
        //校验
        if (!vm.checkRuleForAli()) return;
        epayInfoList.push(vm.aliInfo);
      }
      if (vm.currentPayType.length == 1) {
        vm.deleteInfo(vm.currentPayType[0]);
      } else if (vm.currentPayType.length == 2) {
        vm.deleteInfo(vm.currentPayType[0]);
        vm.deleteInfo(vm.currentPayType[1]);
      }
      let paras = {
        campusId: vm.$store.state.campusId,
        updateUserId: user.userId,
        epayInfoList: epayInfoList
      };
      api.epayAdd(paras).then(function(data) {
        if (data.resultCode == 2000) {
          vm.$message({
            message: "操作成功",
            type: "success"
          });
          vm.applySuccess = true;
          vm.resetForm();
          vm.init();
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    deleteInfo(item) {
      if (item == "在线微信支付" && this.wechatShow) {
      } else if (item == "在线支付宝支付" && this.alipayShow) {
      } else {
        let paras = {
          epayIds:
            item == "在线微信支付" ? vm.wechatInfo.epayId : vm.aliInfo.epayId
        };
        api.epayDetele(paras).then(function(data) {
          if (data.resultCode == 2000) {
            item == "在线微信支付"
              ? (vm.weChatIsUpload = false)
              : (vm.aliIsUpload = false);
            item == "在线微信支付"
              ? delete vm.wechatInfo[epayId]
              : delete vm.aliInfo[epayId];
          } else {
            vm.$message.error(data.message);
          }
        });
      }
    },
    /**
     * 校验支付宝支付设置字段
     */
    checkRuleForAli() {
      var rules = [];
      let aliappId = this.$refs.aliappId;
      let alimchId = this.$refs.alimchId;
      let alimchKey = this.$refs.alimchKey;

      rules.push({
        judge: vm.aliInfo.appId,
        focus: aliappId,
        tips: "请输入支付宝APPID"
      });
      rules.push({
        judge: vm.aliInfo.mchId,
        focus: alimchId,
        tips: "请输入支付宝商户ID"
      });
      rules.push({
        judge: vm.aliInfo.mchKey,
        focus: alimchKey,
        tips: "请输入支付宝商户秘钥"
      });
      rules.push({
        judge: vm.aliInfo.keyPath,
        focus: $("#aliUpload"),
        tips: "请输入选择商户证书"
      });
      if (!tool.validate(rules)) {
        return false;
      }
      return true;
    },
    /**
     * 校验微信支付设置字段
     */
    checkRuleForWeChat() {
      var rules = [];
      let wechatappId = this.$refs.wechatappId;
      let wechatmchId = this.$refs.wechatmchId;
      let wechatmchKey = this.$refs.wechatmchKey;
      rules.push({
        judge: vm.wechatInfo.appId,
        focus: wechatappId,
        tips: "请输入微信APPID"
      });
      rules.push({
        judge: vm.wechatInfo.mchId,
        focus: wechatmchId,
        tips: "请输入微信支付商户ID"
      });
      rules.push({
        judge: vm.wechatInfo.mchKey,
        focus: wechatmchKey,
        tips: "请输入微信支付商户秘钥"
      });
      rules.push({
        judge: vm.wechatInfo.keyPath,
        focus: $("#weChatUpload"),
        tips: "请输入选择商户证书"
      });
      if (!tool.validate(rules)) {
        return false;
      }
      return true;
    },
    /**重置按钮 */
    resetForm() {
      vm.wechatInfo = {
        appId: "", //APPID
        epayType: "2", //支付类型
        keyPath: "", //商户证书
        mchId: "", //商户ID
        mchKey: "", //商户密钥
        subAppId: "", //子商户账号ID
        subMchId: "" //子商户ID
      };
      vm.aliInfo = {
        appId: "", //APPID
        epayType: "1", //支付类型
        keyPath: "", //商户证书
        mchId: "", //商户ID
        mchKey: "", //商户密钥
        subAppId: "", //子商户账号ID
        subMchId: "" //子商户ID
      };
      vm.weChatfileList = [];
      vm.alifileList = [];
      vm.weChatIsUpload = false;
      vm.aliIsUpload = false;
      console.log(vm.wechatInfo);
      console.log(vm.aliInfo);
    },
    editeApplyInfo() {
      vm.applySuccess = false;
    }
  },
  mounted() {
    this.init();
  },
  created: function() {
    vm = this;
    user = JSON.parse(tool.getItem(window.lsKey.user));
  }
};
</script>

<style lang="scss">
.processingset {
  .content-main {
    margin: 0.2rem auto;
    min-width: 15.48rem;
    width: 15.48rem;
    padding: 0.2rem 0.32rem 0.2rem 0.32rem;
    height: auto;
    background: #fff;
    border: 0.01rem solid #ededed;
    border-radius: 0.1rem;
    box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
    color: #333333;
    .title-top {
      display: block;
      width: 100%;
      text-align: center;
      font-size: 0.25rem;
      //   font-weight: bold;
    }
    .ruleForm {
      margin: 0.2rem auto;
      width: 5.4rem;
      padding: 0 0.2rem;
      .el-form-item {
        margin-bottom: 0.1rem;
      }
      .el-form-item__label {
        font-size: 0.16rem !important;
      }
      .el-form-item__content {
        font-size: 0.16rem !important;
      }
      .el-input {
        font-size: 0.16rem !important;
      }
      .upload-demo {
        overflow: hidden;
        .el-upload {
          float: left;
          text-align: center;
          cursor: pointer;
        }
        .el-upload__tip {
          font-size: 0.12rem;
          color: #606266;
          margin-top: 0rem;
          margin-left: 0.1rem;
          float: left;
        }
        .el-upload-list {
          margin-top: 0.45rem;
        }
      }
      .box {
        .row-top {
          width: 100%;
          display: flex;
          justify-content: space-between;
          font-size: 0.16rem;
          color: #333333;
          margin-bottom: 0.1rem;
          .box-title {
            width: 2.2rem;
            display: flex;
            align-items: center;
            margin-left: 0.3rem;
            .ico {
              width: auto;
              height: 0.18rem;
            }
            .txt {
              margin-left: 0.08rem;
            }
          }
          .helptxt {
            color: rgba(34, 116, 245, 1);
            font-style: italic;
          }
          .helptxt:hover {
            cursor: pointer;
          }
        }
      }
      .txtformrow {
        margin-bottom: 0rem;
      }
      .btnbox {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 0.2rem;
        // margin-bottom: 0.2rem;
        .el-button {
          padding: 0.12rem 0.4rem;
          font-size: 0.16rem;
          border-radius: 0.1rem;
        }
        .cancel {
          //   margin-left: 0.9rem;
        }
        .ok {
          margin-left: 0.3rem;
          background-color: #3885f8;
          color: #ffffff;
        }
      }
    }
    .applypopup {
      top: 0.81rem;
      left: 2.1rem;
      background-color: rgba(0, 0, 0, 0.4);
      .el-dialog {
        width: 4.5rem !important;
        .el-dialog__header {
          text-align: center;
          .el-dialog__title {
            font-size: 0.2rem;
            font-weight: bold;
          }
        }
        .el-dialog__body {
          padding: 0.1rem 0.5rem !important;
          padding-bottom: 0.3rem !important;
          font-size: 0.16rem !important;
          .el-row {
            margin-top: 0.05rem;
          }
        }
        .el-dialog__footer {
          text-align: center !important;
        }
      }
    }
  }
}
</style>